<template>
  <div class="sub-card-home">
    <div ref="chart" id="sub-right" style="width: 100%;height:200px"/>
  </div>
</template>

<script lang="ts">
import * as echarts from 'echarts';
import {getCurrentInstance, h, onMounted} from 'vue';
import {defineComponent, reactive} from "vue";

export default defineComponent({
  name: "shangshitongji",
  props: ['index','town'],
  setup(props) {
    const instance = getCurrentInstance();
    const api = instance?.appContext.config.globalProperties.api;
    let myChart = null
    let data2 = reactive([
      {
        name: "申报",
        value: 0
      },
      {
        name: "评估",
        value: 0
      },
      {
        name: "收储",
        value: 0
      },
      {
        name: "平整",
        value: 0
      },
      {
        name: "归档",
        value: 0
      },
      {
        name: "完成",
        value: 0
      },
    ])
    let data = reactive({
      value: ''
    });
    const {appContext} = getCurrentInstance();
    onMounted(() => {
      appContext.config.globalProperties.axios.post(`api/landStep/${props.index}`)
          .then((response) => {
            response.data.forEach(item => {
              let object: any = {}
              if (item.name === '1') {
                data2[0].value = item.value
              } else if (item.name === '2') {
                data2[1].value = item.value
              } else if (item.name === '3') {
                data2[2].value = item.value
              } else if (item.name === '4') {
                data2[3].value = item.value
              } else if (item.name === '5') {
                data2[4].value = item.value
              } else if (item.name === '6') {
                data2[5].value = item.value
              }
            })
          })
      setTimeout(() => {
        let chart = document.getElementById('sub-right');
        myChart = echarts.init(chart);
        //饼图配置
        let option1 = {
          title: {
            text: "企业总数",
            subtext:data.value+"个",
            left: "center",
            top: "30%",
            itemGap: 0,
            textStyle: {
              fontSize: 16,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
            },
            subtextStyle: {
              fontSize: 16,
              color: "#FFFFFF",
              fontFamily: "PingFang SC",
              fontStyle: "normal",
              fontWeight: 400,
              align: "center",
              verticalAlign: "middle"
            },
          },
          series: [
            {
              type: "pie",
              radius: ["70%", "50%"],
              data: data2,
              color: ["#71A0FF", "#F5DF4C", "#FE7A92", "#64FFDA", "#72D572", "#FFB74D", "#E51C23"],
              label: {
                color: "rgba(255, 255, 255, 0.85)",
                formatter: '{b}: {d}%',
                fontFamily: "PingFang SC",
                align: "right",
                fontStyle: "normal",
                fontSize: 10,
                fontWeight: 400,
                width: 200,
              },
              encode: {
                itemName: 'name',
                value: 'percent'
              },
              bottom: "26%",
              labelLine: {
                length: 17,
                lineStyle: {
                  color: "rgba(255, 255, 255, 0.2)",
                  type: "solid"
                }
              }
            },
          ],
          legend: {
            data: data2,
            icon: 'rect',
            textStyle: {
              color: 'rgba(251, 247, 247, 1)'
            },
            bottom: "0%",
            width: "100%",
            formatter: function (name: string) {
              for (let i = 0; i < data2.length; i++) {
                if (name === data2[i].name) {
                  return name + data2[i].value + "个"
                }
              }
            }
          },
        };
        myChart.setOption(option1)
      }, 1000)

    })
    onMounted(() => {
      appContext.config.globalProperties.axios({
        url: 'api/landStep/sum',
        method: 'post',
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("town",props.town);
          return oMyForm;
        }]
      }).then((response) => {
        response.data.forEach(item => {
          data.value = item.value
        })
      })
    })

    return {
      data,
      data2,
    }
  }
})
</script>


<style scoped lang="scss">
.sub-card-home {
  color: #fff;
}
</style>

